<template>
	<div class="wrap" @click.native='alert($event)'>
		<!--:style="{padding: '24px', minHeight: '280px', background: '#fff'}"--> 
		<Content class='wrapContent' 
			id="div1" @drop.native="drop($event)"
			@dragover.native="allowDrop($event)"
			>
			<div class="cotent" :style="{ width: '280px', height:'48px'}">由用户调整元素尺寸。</div>
			<div class="cotent" :style="{ width: '280px', height:'48px'}">由用户调整元素尺寸。</div>
			<div class="cotent" :style="{ width: '280px', height:'48px'}">由用户调整元素尺寸。</div>
			<div class="cotent" :style="{ width: '280px', height:'48px'}">由用户调整元素尺寸。</div>
		</Content>
	</div>

</template>

<script>
	    export default {
    	data () {
    		return {
    			dom:''
    		}
    	},
    	methods : {
			 drag(ev){
			 	console.log('drag --1')
					ev.dataTransfer.setData("Text",ev.target.id);
				 },
			allowDrop (ev) {
				event.preventDefault();
			},
			drop (ev) {
				console.log('drop ---2')
				ev.preventDefault();
				var data=ev.dataTransfer.getData("Text");
				ev.target.appendChild(document.getElementById(data).cloneNode(true));
			},
			alert(evt){
				console.log(evt.target)
			}
    	}
    	      
    }
</script>

<style>
	.wrap{width: 100%;height: 100%; overflow: hidden;}
	.wrapContent{width: 100%;height: 100%;}
	.cotent{padding:10px 40px; max-width: 100%; max-height: 100%; border: 2px solid gray; box-sizing: border-box; float: left; resize: both;overflow:auto;}
	

</style>